<template>
  <div class="user-profile-edit">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="status-left">9:41</div>
      <div class="status-right">
        <div class="signal"></div>
        <div class="wifi"></div>
        <div class="battery"></div>
      </div>
    </div>

    <!-- 头部导航 -->
    <div class="header-nav">
      <div class="back-btn" @click="goBack">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </div>
      <h1 class="page-title">编辑资料</h1>
      <div class="save-btn" @click="saveProfile">保存</div>
    </div>

    <!-- 用户头像区域 -->
    <div class="avatar-section">
      <div class="avatar-container">
        <img :src="userInfo.avatar" alt="用户头像" class="avatar" />
        <div class="edit-avatar-btn" @click="changeAvatar">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
            <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
          </svg>
        </div>
        <!-- 隐藏的文件输入框 -->
        <input 
          ref="fileInput"
          type="file" 
          accept="image/*" 
          class="file-input" 
          @change="handleFileChange"
        />
      </div>
    </div>

    <!-- 个人信息表单 -->
    <div class="form-section">
      <div class="form-item">
        <label class="form-label">昵称</label>
        <input 
          v-model="userInfo.nickname" 
          type="text" 
          class="form-input" 
          placeholder="请输入昵称"
        />
      </div>

      <div class="form-item">
        <label class="form-label">证件号码</label>
        <input 
          v-model="userInfo.idNumber" 
          type="text" 
          class="form-input" 
          placeholder="请输入证件号码"
        />
      </div>

      <div class="form-item">
        <label class="form-label">出生日期</label>
        <div class="date-input" @click="showDatePicker = true">
          <span>{{ userInfo.birthDate || '请选择出生日期' }}</span>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
            <line x1="16" y1="2" x2="16" y2="6"/>
            <line x1="8" y1="2" x2="8" y2="6"/>
            <line x1="3" y1="10" x2="21" y2="10"/>
          </svg>
        </div>
      </div>

      <div class="form-item">
        <label class="form-label">手机号</label>
        <input 
          v-model="userInfo.phone" 
          type="tel" 
          class="form-input" 
          placeholder="请输入手机号"
        />
      </div>

      <div class="form-item">
        <label class="form-label">地址</label>
        <input 
          v-model="userInfo.address" 
          type="text" 
          class="form-input" 
          placeholder="请输入地址"
        />
      </div>

      <div class="form-item">
        <label class="form-label">Email</label>
        <input 
          v-model="userInfo.email" 
          type="email" 
          class="form-input" 
          placeholder="请输入邮箱"
        />
      </div>

      <div class="form-item">
        <label class="form-label">性别</label>
        <div class="select-input" @click="showGenderPicker = true">
          <span>{{ userInfo.gender || '请选择性别' }}</span>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
            <polyline points="6,9 12,15 18,9"/>
          </svg>
        </div>
      </div>

      <div class="form-item">
        <label class="form-label">血型</label>
        <div class="select-input" @click="showBloodTypePicker = true">
          <span>{{ userInfo.bloodType || '请选择血型' }}</span>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
            <polyline points="6,9 12,15 18,9"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 更新按钮 -->
    <div class="update-section">
      <button class="update-btn" @click="saveProfile">更新</button>
    </div>

    <!-- 日期选择器 -->
    <div v-if="showDatePicker" class="picker-overlay" @click="showDatePicker = false">
      <div class="picker-container" @click.stop>
        <div class="picker-header">
          <span @click="showDatePicker = false">取消</span>
          <span>选择日期</span>
          <span @click="confirmDate">确定</span>
        </div>
        <input 
          v-model="tempDate" 
          type="date" 
          class="date-picker"
        />
      </div>
    </div>

    <!-- 性别选择器 -->
    <div v-if="showGenderPicker" class="picker-overlay" @click="showGenderPicker = false">
      <div class="picker-container" @click.stop>
        <div class="picker-header">
          <span @click="showGenderPicker = false">取消</span>
          <span>选择性别</span>
          <span @click="confirmGender">确定</span>
        </div>
        <div class="picker-options">
          <div 
            v-for="option in genderOptions" 
            :key="option"
            class="picker-option"
            :class="{ active: tempGender === option }"
            @click="tempGender = option"
          >
            {{ option }}
          </div>
        </div>
      </div>
    </div>

    <!-- 血型选择器 -->
    <div v-if="showBloodTypePicker" class="picker-overlay" @click="showBloodTypePicker = false">
      <div class="picker-container" @click.stop>
        <div class="picker-header">
          <span @click="showBloodTypePicker = false">取消</span>
          <span>选择血型</span>
          <span @click="confirmBloodType">确定</span>
        </div>
        <div class="picker-options">
          <div 
            v-for="option in bloodTypeOptions" 
            :key="option"
            class="picker-option"
            :class="{ active: tempBloodType === option }"
            @click="tempBloodType = option"
          >
            {{ option }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserData } from '../../composables/useUserData'

const router = useRouter()
const { userInfo, updateUserInfo, updateAvatar } = useUserData()

// 文件输入引用
const fileInput = ref<HTMLInputElement>()

// 选择器状态
const showDatePicker = ref(false)
const showGenderPicker = ref(false)
const showBloodTypePicker = ref(false)

// 临时选择值
const tempDate = ref('')
const tempGender = ref('')
const tempBloodType = ref('')

// 选项数据
const genderOptions = ['先生', '女士']
const bloodTypeOptions = ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-']

// 返回上一页
const goBack = () => {
  router.back()
}

// 更换头像
const changeAvatar = () => {
  fileInput.value?.click()
}

// 处理文件选择
const handleFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  
  if (file) {
    // 验证文件类型
    if (!file.type.startsWith('image/')) {
      alert('请选择图片文件')
      return
    }
    
    // 验证文件大小 (限制为 5MB)
    if (file.size > 5 * 1024 * 1024) {
      alert('图片大小不能超过 5MB')
      return
    }
    
    // 创建 FileReader 来读取文件
    const reader = new FileReader()
    reader.onload = (e) => {
      const result = e.target?.result as string
      if (result) {
        // 更新头像
        updateAvatar(result)
        alert('头像更新成功！')
      }
    }
    reader.readAsDataURL(file)
    
    // 清空文件输入框，允许重复选择同一文件
    target.value = ''
  }
}

// 确认日期选择
const confirmDate = () => {
  if (tempDate.value) {
    updateUserInfo({ birthDate: tempDate.value })
  }
  showDatePicker.value = false
}

// 确认性别选择
const confirmGender = () => {
  if (tempGender.value) {
    updateUserInfo({ gender: tempGender.value })
  }
  showGenderPicker.value = false
}

// 确认血型选择
const confirmBloodType = () => {
  if (tempBloodType.value) {
    updateUserInfo({ bloodType: tempBloodType.value })
  }
  showBloodTypePicker.value = false
}

// 保存资料
const saveProfile = () => {
  console.log('保存用户资料:', userInfo)
  alert('资料更新成功！')
  router.back()
}
</script>

<style scoped lang="scss">
.user-profile-edit {
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #000;
  color: white;
  font-size: 14px;
  font-weight: 600;

  .status-right {
    display: flex;
    gap: 5px;
    align-items: center;
  }

  .signal, .wifi, .battery {
    width: 20px;
    height: 12px;
    background: #fff;
    border-radius: 2px;
  }

  .signal {
    background: linear-gradient(90deg, #fff 0%, #fff 80%, transparent 80%);
  }

  .wifi {
    background: radial-gradient(circle at 50% 50%, transparent 0, transparent 3px, #fff 3px, #fff 6px, transparent 6px);
  }

  .battery {
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      right: -3px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 6px;
      background: #fff;
      border-radius: 0 1px 1px 0;
    }
  }
}

.header-nav {
  background: linear-gradient(135deg, #1877F2 0%, #005AFF 100%);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;

  .back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.3);
    }
  }

  .page-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
  }

  .save-btn {
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.3);
    }
  }
}

.avatar-section {
  background: white;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #f0f0f0;

  .avatar-container {
    position: relative;
    display: inline-block;

    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #f0f0f0;
    }

    .edit-avatar-btn {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #1877F2;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.3s ease;

      &:hover {
        background: #005AFF;
      }
    }

    .file-input {
      display: none;
    }
  }
}

.form-section {
  background: white;
  padding: 20px;
}

.form-item {
  margin-bottom: 20px;

  .form-label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
  }

  .form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    background: #f8f9fa;
    transition: border-color 0.3s ease;

    &:focus {
      outline: none;
      border-color: #1877F2;
      background: white;
    }

    &::placeholder {
      color: #999;
    }
  }

  .date-input, .select-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.3s ease;

    &:hover {
      border-color: #1877F2;
    }

    span {
      color: #333;
    }
  }
}

.update-section {
  padding: 20px;
  background: white;
  margin-top: 20px;

  .update-btn {
    width: 100%;
    padding: 16px;
    background: #1877F2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;

    &:hover {
      background: #005AFF;
    }
  }
}

.picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 1000;
}

.picker-container {
  width: 100%;
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;

  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;

    span {
      font-size: 16px;
      color: #1877F2;
      cursor: pointer;

      &:nth-child(2) {
        color: #333;
        font-weight: 600;
      }
    }
  }

  .date-picker {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
  }

  .picker-options {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .picker-option {
      padding: 12px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s ease;

      &:hover {
        background: #f8f9fa;
      }

      &.active {
        background: #1877F2;
        color: white;
      }
    }
  }
}

@media (max-width: 768px) {
  .form-section {
    padding: 15px;
  }

  .update-section {
    padding: 15px;
  }
}
</style> 